<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梅花易数起卦测试页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(45deg, #2c3e50, #3498db);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .tabs {
            display: flex;
            background: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
        }

        .tab {
            flex: 1;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            background: #f8f9fa;
            border: none;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            color: #6c757d;
        }

        .tab:hover {
            background: #e9ecef;
            color: #495057;
        }

        .tab.active {
            background: white;
            color: #007bff;
            border-bottom: 3px solid #007bff;
        }

        .tab-content {
            display: none;
            padding: 40px;
        }

        .tab-content.active {
            display: block;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #495057;
            font-size: 14px;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
        }

        .btn {
            background: linear-gradient(45deg, #007bff, #0056b3);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .result-container {
            margin-top: 30px;
            padding: 25px;
            background: #f8f9fa;
            border-radius: 10px;
            border-left: 5px solid #007bff;
        }

        .result-title {
            font-size: 18px;
            font-weight: 600;
            color: #495057;
            margin-bottom: 15px;
        }

        .result-content {
            background: white;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
        }

        .loading {
            text-align: center;
            color: #6c757d;
            font-style: italic;
        }

        .error {
            color: #dc3545;
            background: #f8d7da;
            border-color: #f5c6cb;
        }

        .success {
            color: #155724;
            background: #d4edda;
            border-color: #c3e6cb;
        }

        .row {
            display: flex;
            gap: 15px;
            align-items: end;
        }

        .col {
            flex: 1;
        }

        .file-input-wrapper {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .file-input {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .file-input-display {
            padding: 12px 15px;
            border: 2px dashed #dee2e6;
            border-radius: 8px;
            text-align: center;
            color: #6c757d;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .file-input-display:hover {
            border-color: #007bff;
            color: #007bff;
        }

        .file-input-display.has-file {
            border-style: solid;
            border-color: #28a745;
            color: #28a745;
        }

        .hexagram-display {
            text-align: center;
            margin: 20px 0;
        }

        .hexagram-symbols {
            font-size: 2em;
            margin: 10px 0;
            letter-spacing: 10px;
        }

        .hexagram-names {
            font-size: 1.2em;
            font-weight: 600;
            color: #495057;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🌟 梅花易数起卦测试</h1>
            <p>体验传统梅花易数的智慧，探索卦象的奥秘</p>
        </div>

        <div class="tabs">
            <button class="tab active" onclick="switchTab(0)">时间起卦</button>
            <button class="tab" onclick="switchTab(1)">数字起卦</button>
            <button class="tab" onclick="switchTab(2)">图片起卦</button>
            <button class="tab" onclick="switchTab(3)">文本起卦</button>
        </div>

        <!-- 时间起卦 -->
        <div class="tab-content active" id="tab-0">
            <h3>⏰ 时间起卦</h3>
            <p style="color: #6c757d; margin-bottom: 30px;">根据特定时间生成卦象，时间蕴含着天地运行的规律</p>
            
            <form id="timeForm">
                <div class="form-group">
                    <label for="timeQuestion">占卜问题</label>
                    <input type="text" id="timeQuestion" class="form-control" 
                           placeholder="请输入您的问题，如：今日运势如何？" required>
                </div>
                
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="divinationTime">起卦时间</label>
                            <input type="datetime-local" id="divinationTime" class="form-control">
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="timeAlgorithm">算法类型</label>
                            <select id="timeAlgorithm" class="form-control">
                                <option value="TRADITIONAL">传统算法</option>
                                <option value="MODERN">现代算法</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="useCurrentTime" checked style="margin-right: 8px;">
                        使用当前时间
                    </label>
                </div>
                
                <button type="submit" class="btn">开始时间起卦</button>
            </form>
            
            <div id="timeResult" class="result-container" style="display: none;">
                <div class="result-title">卦象结果</div>
                <div class="result-content"></div>
            </div>
        </div>

        <!-- 数字起卦 -->
        <div class="tab-content" id="tab-1">
            <h3>🔢 数字起卦</h3>
            <p style="color: #6c757d; margin-bottom: 30px;">通过两个数字的组合来生成卦象，数字承载着宇宙的密码</p>
            
            <form id="numberForm">
                <div class="form-group">
                    <label for="numberQuestion">占卜问题</label>
                    <input type="text" id="numberQuestion" class="form-control" 
                           placeholder="请输入您的问题" required>
                </div>
                
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="number1">第一个数字 (1-999)</label>
                            <input type="number" id="number1" class="form-control" 
                                   min="1" max="999" placeholder="请输入1-999的数字" required>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="number2">第二个数字 (1-999)</label>
                            <input type="number" id="number2" class="form-control" 
                                   min="1" max="999" placeholder="请输入1-999的数字" required>
                        </div>
                    </div>
                </div>
                
                <button type="submit" class="btn">开始数字起卦</button>
            </form>
            
            <div id="numberResult" class="result-container" style="display: none;">
                <div class="result-title">卦象结果</div>
                <div class="result-content"></div>
            </div>
        </div>

        <!-- 图片起卦 -->
        <div class="tab-content" id="tab-2">
            <h3>🖼️ 图片起卦</h3>
            <p style="color: #6c757d; margin-bottom: 30px;">通过图片的特征来生成卦象，图像蕴含着丰富的信息</p>
            
            <form id="imageForm">
                <div class="form-group">
                    <label for="imageQuestion">占卜问题</label>
                    <input type="text" id="imageQuestion" class="form-control" 
                           placeholder="请输入您的问题" required>
                </div>
                
                <div class="form-group">
                    <label for="imageFile">选择图片</label>
                    <div class="file-input-wrapper">
                        <input type="file" id="imageFile" class="file-input" 
                               accept="image/*" required>
                        <div class="file-input-display" id="imageDisplay">
                            📎 点击选择图片文件 (支持 JPG, PNG, GIF)
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="imageAlgorithm">算法类型</label>
                            <select id="imageAlgorithm" class="form-control">
                                <option value="COLOR_HASH">颜色哈希</option>
                                <option value="EDGE_DETECTION">边缘检测</option>
                                <option value="PIXEL_ANALYSIS">像素分析</option>
                            </select>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label>
                                <input type="checkbox" id="extractFeatures" checked style="margin-right: 8px;">
                                提取图片特征
                            </label>
                        </div>
                    </div>
                </div>
                
                <button type="submit" class="btn">开始图片起卦</button>
            </form>
            
            <div id="imageResult" class="result-container" style="display: none;">
                <div class="result-title">卦象结果</div>
                <div class="result-content"></div>
            </div>
        </div>

        <!-- 文本起卦 -->
        <div class="tab-content" id="tab-3">
            <h3>📝 文本起卦</h3>
            <p style="color: #6c757d; margin-bottom: 30px;">通过文本内容来生成卦象，文字承载着思想的能量</p>
            
            <form id="textForm">
                <div class="form-group">
                    <label for="textQuestion">占卜问题</label>
                    <input type="text" id="textQuestion" class="form-control" 
                           placeholder="请输入您的问题" required>
                </div>
                
                <div class="form-group">
                    <label for="inputText">输入文本内容</label>
                    <textarea id="inputText" class="form-control" rows="4" 
                              placeholder="请输入文本内容，可以是您想到的任何词语或句子" required></textarea>
                </div>
                
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="sourceType">来源类型</label>
                            <select id="sourceType" class="form-control">
                                <option value="TEXT">手动输入</option>
                                <option value="VOICE">语音识别</option>
                                <option value="OCR">图片识别</option>
                            </select>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="textAlgorithm">算法类型</label>
                            <select id="textAlgorithm" class="form-control">
                                <option value="TEXT_HASH">文本哈希</option>
                                <option value="WORD_COUNT">词汇统计</option>
                                <option value="SEMANTIC">语义分析</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="nlpAnalysis" style="margin-right: 8px;">
                        启用NLP分析
                    </label>
                </div>
                
                <button type="submit" class="btn">开始文本起卦</button>
            </form>
            
            <div id="textResult" class="result-container" style="display: none;">
                <div class="result-title">卦象结果</div>
                <div class="result-content"></div>
            </div>
        </div>
    </div>

    <script>
        // API 基础URL
        const API_BASE = 'http://localhost:8080/api/v1';
        
        // 当前活动的标签
        let currentTab = 0;

        // 切换标签
        function switchTab(index) {
            // 移除所有活动状态
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
            
            // 设置新的活动状态
            document.querySelectorAll('.tab')[index].classList.add('active');
            document.querySelector(`#tab-${index}`).classList.add('active');
            
            currentTab = index;
        }

        // 初始化当前时间
        function initCurrentTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            
            document.getElementById('divinationTime').value = `${year}-${month}-${day}T${hours}:${minutes}`;
        }

        // 显示结果
        function showResult(containerId, data, isError = false) {
            const container = document.getElementById(containerId);
            const content = container.querySelector('.result-content');
            
            container.style.display = 'block';
            
            if (isError) {
                content.className = 'result-content error';
                content.textContent = data;
            } else {
                content.className = 'result-content success';
                content.textContent = JSON.stringify(data, null, 2);
                
                // 如果有卦象信息，显示卦象
                if (data.data && data.data.hexagram) {
                    displayHexagram(content, data.data.hexagram);
                }
            }
        }

        // 显示卦象
        function displayHexagram(container, hexagram) {
            const hexagramDiv = document.createElement('div');
            hexagramDiv.className = 'hexagram-display';
            
            if (hexagram.original && hexagram.changed) {
                hexagramDiv.innerHTML = `
                    <div class="hexagram-names">
                        本卦：${hexagram.original.name || '未知'} → 变卦：${hexagram.changed.name || '未知'}
                    </div>
                    <div class="hexagram-symbols">
                        ${hexagram.original.symbol || '☰'} → ${hexagram.changed.symbol || '☰'}
                    </div>
                `;
            } else if (hexagram.name) {
                hexagramDiv.innerHTML = `
                    <div class="hexagram-names">${hexagram.name}</div>
                    <div class="hexagram-symbols">${hexagram.upperSymbol || '☰'} ${hexagram.lowerSymbol || '☰'}</div>
                `;
            }
            
            container.insertBefore(hexagramDiv, container.firstChild);
        }

        // 显示加载状态
        function showLoading(containerId) {
            const container = document.getElementById(containerId);
            const content = container.querySelector('.result-content');
            
            container.style.display = 'block';
            content.className = 'result-content loading';
            content.textContent = '正在起卦中，请稍候...';
        }

        // 时间起卦
        document.getElementById('timeForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const question = document.getElementById('timeQuestion').value;
            const useCurrentTime = document.getElementById('useCurrentTime').checked;
            const divinationTime = document.getElementById('divinationTime').value;
            const algorithm = document.getElementById('timeAlgorithm').value;
            
            const requestData = {
                question: question,
                useCurrentTime: useCurrentTime,
                algorithm: algorithm
            };
            
            if (!useCurrentTime && divinationTime) {
                requestData.divinationTime = new Date(divinationTime).toISOString();
            }
            
            try {
                showLoading('timeResult');
                
                const response = await fetch(`${API_BASE}/divination/time`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(requestData)
                });
                
                const data = await response.json();
                showResult('timeResult', data, !data.success);
            } catch (error) {
                showResult('timeResult', `请求失败: ${error.message}`, true);
            }
        });

        // 数字起卦
        document.getElementById('numberForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const question = document.getElementById('numberQuestion').value;
            const number1 = parseInt(document.getElementById('number1').value);
            const number2 = parseInt(document.getElementById('number2').value);
            
            const requestData = {
                question: question,
                number1: number1,
                number2: number2
            };
            
            try {
                showLoading('numberResult');
                
                const response = await fetch(`${API_BASE}/divination/number`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(requestData)
                });
                
                const data = await response.json();
                showResult('numberResult', data, !data.success);
            } catch (error) {
                showResult('numberResult', `请求失败: ${error.message}`, true);
            }
        });

        // 图片起卦
        document.getElementById('imageForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const question = document.getElementById('imageQuestion').value;
            const imageFile = document.getElementById('imageFile').files[0];
            const algorithm = document.getElementById('imageAlgorithm').value;
            const extractFeatures = document.getElementById('extractFeatures').checked;
            
            if (!imageFile) {
                showResult('imageResult', '请选择图片文件', true);
                return;
            }
            
            const formData = new FormData();
            formData.append('question', question);
            formData.append('image', imageFile);
            formData.append('algorithm', algorithm);
            formData.append('extractFeatures', extractFeatures);
            
            try {
                showLoading('imageResult');
                
                const response = await fetch(`${API_BASE}/divination/image`, {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                showResult('imageResult', data, !data.success);
            } catch (error) {
                showResult('imageResult', `请求失败: ${error.message}`, true);
            }
        });

        // 文本起卦
        document.getElementById('textForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const question = document.getElementById('textQuestion').value;
            const inputText = document.getElementById('inputText').value;
            const sourceType = document.getElementById('sourceType').value;
            const algorithm = document.getElementById('textAlgorithm').value;
            const nlpAnalysis = document.getElementById('nlpAnalysis').checked;
            
            const requestData = {
                question: question,
                inputText: inputText,
                sourceType: sourceType,
                algorithm: algorithm,
                nlpAnalysis: nlpAnalysis
            };
            
            try {
                showLoading('textResult');
                
                const response = await fetch(`${API_BASE}/divination/text`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(requestData)
                });
                
                const data = await response.json();
                showResult('textResult', data, !data.success);
            } catch (error) {
                showResult('textResult', `请求失败: ${error.message}`, true);
            }
        });

        // 文件选择处理
        document.getElementById('imageFile').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const display = document.getElementById('imageDisplay');
            
            if (file) {
                display.textContent = `✅ 已选择: ${file.name}`;
                display.classList.add('has-file');
            } else {
                display.textContent = '📎 点击选择图片文件 (支持 JPG, PNG, GIF)';
                display.classList.remove('has-file');
            }
        });

        // 当前时间复选框处理
        document.getElementById('useCurrentTime').addEventListener('change', function(e) {
            const timeInput = document.getElementById('divinationTime');
            timeInput.disabled = e.target.checked;
            if (e.target.checked) {
                initCurrentTime();
            }
        });

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initCurrentTime();
        });
    </script>
</body>
</html>